import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet,
    ImageBackground
} from 'react-native';

import {
    Button
}  from './../components';

import {
    Actions
} from 'react-native-router-flux';

import connect from './../utils/connect';

import userAction from './../state/actions/user';
import * as userTypes from './../state/types/user';
import RNBootSplash from 'react-native-bootsplash';

import app_icon from './../images/logo.png';
import launch_icon from './../images/launch.png';

interface Props {
    user:any,
    popState: boolean,
    userActions: any
}

const _await = (daley = 1000) => (
    new Promise(resolve => (
        setTimeout(resolve, daley)
    ))
)

const Container = (props:any) => (
    <ImageBackground
        {...props}
        resizeMode="cover"
        source={launch_icon}
        style={styles.container}
    />
)

@connect([`user`],{
    userActions: userAction
})
class AppIndex extends PureComponent<Props> {

    public _daley: any = null;

    static defaultProps = {
        user:{},
        popState:false,
        userActions:{}
    }

    get userState() {
        const {
            user
        } = this.props;

        const {
            loginUser
        } = user;

        return loginUser || {};
    }

    get userId() {
        const {
            userId = 0
        } = this.userState;
        return userId;
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    UNSAFE_componentWillMount() {
        setTimeout(this.onCheckLogin);
    }

    checkStatus = () => (
        this.userActions[userTypes.loginStatus]()
    )

    onCheckLogin = async () => {
        //如果有userId，直接开屏
        if (!!this.userId) {
            this.checkStatus();
            Actions.replace(`/home`);
        }
        this._openScreen();
    }

    //开屏
    private _openScreen = async () => {
        const _config = {
            duration: 350
        }
        if (this._daley) (
            clearTimeout(this._daley)
        )
        await _await(1200);
        RNBootSplash.hide(_config);
    }

    private onSignIn = () => {
        Actions.push(`/user/login`);
    }

    private _toTerms = () => {
        Actions.push(`/terms`)
    }

    private _toPrivacy = () => {
        Actions.push(`/privacy`)
    }

    private toRegister = () => {
        Actions.push(`/user/register`)
    }

    get Header() {
        return (
            <View style={styles.headerStyle}>
                <Image source={app_icon}/>
            </View>
        )
    }

    get Footer() {
        return (
            <View style={styles.footer}>
                <Text style={styles.footerText}>
                    By signing up you agree to our
                </Text>
                <Text style={styles.footerText}>
                    <Text
                        onPress={this._toTerms}
                        style={styles.underline}
                        children="Terms of Service"
                    />
                    <Text>{` and `}</Text>
                    <Text
                        children="Privacy Policy"
                        style={styles.underline}
                        onPress={this._toPrivacy}
                    />
                </Text>
            </View>
        )
    }

    render() {
        return (
            <Container>
                {this.Header}
                <View style={styles.content}>
                    <Button
                        title="SIGN UP WITH EMAIL"
                        onPress={this.toRegister}
                    />
                    <Button
                        title="SIGN IN"
                        onPress={this.onSignIn}
                        style={styles.buttonStyle}
                        titleStyle={styles.titleStyle}
                    />
                </View>
                {this.Footer}
            </Container>
        )
    }
}


export default AppIndex;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    content:{
        flex:1,
        paddingBottom:136,
        paddingHorizontal:36,
        justifyContent:`flex-end`
    },
    headerStyle:{
        paddingTop:140,
        alignItems:`center`
    },
    buttonStyle:{
        marginTop:30,
        backgroundColor:`#fff`
    },
    titleStyle:{
        color:`#454545`
    },
    footer: {
        paddingBottom:24
    },
    footerText: {
        fontSize: 14,
        color: `#fff`,
        marginTop: 4,
        textAlign: `center`,
    },
    underline: {
        textDecorationLine:'underline'
    }
}) as any;